<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 荣誉奖
                </el-breadcrumb-item>
                <el-breadcrumb-item>荣誉奖申请</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form  ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="form.nickname" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="学号">
                        <el-input v-model="form.number" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="班级">
                        <el-input v-model="form.className" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="积点排名" prop="ranking">
                        <el-input v-model="form.ranking" ></el-input>
                    </el-form-item>
                    <el-form-item label="体测成绩" prop="result">
                        <el-input v-model="form.result" ></el-input>
                    </el-form-item>
                    <el-form-item label="申请类型" prop="awardsId">
                        <el-select v-model="form.awardsId" class="handle-select mr10" placeholder="类型">
                            <el-option
                            v-for="item in awardsOptinos"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="附件" prop="userFile">
                        <el-upload
                            v-model="form.userFile"
                            class="upload-demo"
                            drag
                            ref="fileUpload" 
                            action="abc"
                            :on-change="fileChange"
                            :auto-upload="false"
                            :multiple="false"
                            :limit=1
                            accept=".doc,.docx">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">提示：仅允许导入“doc”或“docx”格式文件！</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" rows="5" v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                        <el-button @click="canelFile">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import{selectMyAwards} from "@/api/myAwards.js";
import{insert,checkApply} from "@/api/apply.js"
import{getUser} from "@/api/user.js";
export default {
    name: 'grant',
    data() {
        return {
            form: {
                userId:null,
                username: '',
                nickname: '',
                number:'',
                remark:'',
                ranking:null,
                result:null,
                classId:null,
                className:'',
                awardsId:null,
                userFile:null,
            },
            classId:null,
            // userFile:null,
            awardsOptinos:[],
                        //校验规则
            rules:{
                awardsId: [{ required: true, message: '请选择', trigger: 'blur' }],
                userFile:[{ required: true, message: '请选择文件',trigger: 'blur'}],
                ranking: [{pattern: /^[0-9]*$/,required: true,message: '请填写(数字)',trigger: 'blur' }],
                result:[{pattern: /^[0-9]*$/,required: true,message: '请填写(数字)',trigger: 'blur' }],
            },

        };
    },
    created() {
        this.getUserByUserId();
        this.getMyAwards();
    },

    methods: {
        //获得所有类型
        getMyAwards(){
            const userInfo = localStorage.getItem("userInfo");
            const user = JSON.parse(userInfo);
            this.classId = user.classId;
            const _this = this;
            selectMyAwards(this.classId).then((res)=>{
                let type = res.data;
                _this.awardsOptinos =  type.map((item) => {
                    //组装，只需要id和name
                    return { value: item.awardsId,label: item.awardsName };
                });
            })
        },
        fileChange(file){

            this.form.userFile = file.raw;
        },
        getUserByUserId(){
            let userInfo = localStorage.getItem("userInfo");
            let user = JSON.parse(userInfo);
            const userId = user.userId;
            getUser(userId).then(res =>{
                console.log(res);
                this.form = res.data;
            })

        },


        onSubmit(form) {
            this.$refs[form].validate((valid) => {
                    if (valid) {
                        const userInfo = localStorage.getItem("userInfo");
                        const user = JSON.parse(userInfo);
                        this.form.userId = user.userId;
                        checkApply(this.form.userId,this.form.awardsId).then(res=>{
                            console.log(res);
                            if(res.code === 400){
                                this.$message.error(res.message);
                                }else{
                                        let formData = new FormData();
                                        formData.append('userId',this.form.userId);
                                        formData.append('awardsId',this.form.awardsId);
                                        formData.append('remark',this.form.remark);
                                        formData.append('userFile',this.form.userFile);
                                        formData.append('ranking',this.form.ranking);
                                        formData.append('result',this.form.result);
                                        insert(formData).then(res=>{
                                            this.$message.success('提交成功');
                                            this.resetFile();
                                        })

                                    }
                        })
                    } else {
                        return false;
                    }
            });

            // if(this.userFile == null){
            //     this.$message.error("请选择文件");
            // }
            // else{
           
            // }
            //this.$message.success('提交成功！');
        },
        resetFile(){
            this.form.userFile = null;
            this.$refs.fileUpload.clearFiles();
        },
        canelFile(){
            this.resetFile();
        },

    }
};
</script>